<template>
  <div class="profile-modal" v-if="isOpen" @click.self="$emit('close')">
    <div class="modal-content">
      <div class="modal-header">
        <h2>个人资料</h2>
        <span class="close-btn" @click="$emit('close')">&times;</span>
      </div>
      <div class="modal-body">
        <div class="profile-form">
          <div class="form-group">
            <label for="profile-username">用户名</label>
            <input type="text" id="profile-username" class="form-control" value="用户名称">
          </div>
          </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" @click="$emit('close')">取消</button>
        <button class="btn btn-primary" @click="saveProfile">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
});

defineEmits(['close']);

const saveProfile = () => {
  // 目前还未做账号,后续需要调用接口
  ElMessage({
    message: '用户名修改成功!',
    type: 'success',
  })
};
</script>

<style scoped>
.profile-modal {
  display: flex;
}
</style>